<template>
  <el-row v-bind="rowConfig">
    <template v-for="item in formItems">
      <FormItemCore :isEditByRow="isEditByRow" :colLayout="colLayout" :propKey="propKey" :allData="allData" :hideItems="hideItems" :itemData="item"
        :itemStyle="itemStyle" :allDisabled="allDisabled" :value="data" @update:value="updateValue"
        @keyUpEnter="keyUpEnter" :tmpInfo="tmpInfo">
        <template v-for="(_, name) in $slots" #[name]="slotData">
          <slot :name="name" v-bind="slotData" />
        </template>
      </FormItemCore>
    </template>
    <el-col v-bind="layout" v-if="$slots['end']" :style="itemStyle">
      <slot name="end"></slot>
    </el-col>
    <div class="flex-1" v-bind="footerLayout" v-if="$slots['end1']" :style="(itemStyle as any)">
      <slot name="end1"></slot>
    </div>
  </el-row>
</template>
<script setup lang='ts'>
import { assign } from 'fair-wing'
import FormItemCore from './FormItem.vue'
import type { Props, allDataType } from './types/index.ts'

type PropsType = Props & {
  allData: allDataType
  value: Props['data']
}
const emits = defineEmits(['keyUpEnter', 'update:value'])
const {
  allData,
  propKey,
  allDisabled = false,
  formItems = [],
  data = {},
  itemStyle = { padding: '20px 20px 0px 0px' },
  colLayout,
  footerLayout = {},
  rowConfig = {},
  hideItems = [],
  tmpInfo = {},
  isEditByRow = true
} = defineProps<PropsType>()

const layout = computed(() => assign({}, colLayout, footerLayout) as any)

const keyUpEnter = ($event: any, current: any) => {
  emits('keyUpEnter', {
    event: $event,
    current,
  })
}

function updateValue(value: any, field: string) {
  emits('update:value', value, field)
}
</script>
<style scoped lang='scss'>
</style>